<template>
  <div class="ddd">
    <div class="recommend">
      <div class="recommend-info">
        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
          <!-- 轮播图 -->
          <div class="recommend-swiper">
            <van-swipe
              class="my-swipe"
              :autoplay="2000"
              indicator-color="white"
              loop
            >
              <van-swipe-item
                v-for="(item, index) in imageDataList"
                :key="index"
              >
                <a :href="item.link"><img v-lazy="item.pic" /></a>
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="popular-recommendation">热门歌单推荐</div>
          <!-- 推荐歌手 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="30"
          >
            <ul class="singerList">
              <li
                class="singersinfo"
                v-for="(item, index) in RecommendList"
                :key="index"
              >
                <div class="left">
                  <img :src="item.imgurl" />
                </div>
                <div class="right">
                  <h2 class="singer-name">{{ item.creator.name }}</h2>
                  <p class="sing-info">{{ item.dissname }}</p>
                </div>
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { getBanner, getRecommendList } from "@axios/service";
export default {
  data() {
    return {
      imageDataList: [],
      RecommendList: [],
      loading: false,
      finished: false,
      refreshLoading: false,
    };
  },
  methods: {
    onLoad() {
      this.getRecommendData();
    },
    onRefresh() {
      this.refreshRecommendData();
    },
    async getBannerData() {
      const { code, result } = (await getBanner()) || {};
      if (code) return false;
      this.imageDataList = result?.sliders || [];
    },
    async getRecommendData() {
      const { code, data } = (await getRecommendList()) || {};
      this.loading = false;
      if (code) return false;
      this.RecommendList = [...this.RecommendList, ...(data?.list || [])];
      // 超过80条数就没有数据了
      if (this.RecommendList.length >= 80) {
        this.finished = true;
      }
    },
    async refreshRecommendData() {
      const { code, data } = (await getRecommendList()) || {};
      this.refreshLoading = false;
      // 重置上拉加载的完成状态
      this.finished = false;
      if (code) return false;
      this.RecommendList = data?.list || [];
    },
  },
  created() {
    this.getBannerData();
  },
};
</script>

<style lang="less" scoped>
@import "@styles/index.less";
.ddd {
  position: fixed;
  .top(88);
  left: 0;
  right: 0;
  bottom: 0;
  background: @bgcolor;
}
.recommend {
  position: fixed;
  overflow: scroll;
  .top(88);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  .recommend-info {
    flex: 1;
    /deep/.van-pull-refresh {
      background: #222;
    }
    .popular-recommendation {
      background: @bgcolor;
      color: @c;
      text-align: center;
      .wh(375,65);
      .lh(65);
      .fs(14);
    }
    .recommend-swiper {
      .wh(375,150);
      .my-swipe .van-swipe-item {
        .wh(375,150);
        color: pink;
        text-align: center;
        background-color: @bgcolor;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .singerList {
      background: #222222;
      .singersinfo {
        .w(375);
        .h(82.5);
        .padding(0,20,20,20);
        box-sizing: border-box;
        display: flex;
        .left {
          .wh(80,60);
          display: flex;
          img {
            .wh(60,60);
            .margin(0,20,0,0);
          }
        }
        .right {
          flex: 1;
          .fs(14);
          color: rgba(225, 225, 225);
          .singer-name {
            .fs(16);
            color: rgba(225, 225, 225, 0.8);
            font-weight: bolder;
            .margin(5,0,20,0);
          }
          .sing-info {
            color: rgba(225, 225, 225, 0.6);
          }
        }
      }
    }
  }
}
</style>
